<template>
  <div class="role-add">
    <el-form ref="form" :model="roleForm" label-width="120px">
      <el-form-item label="角色名称:">
        <el-input v-model="roleForm.role_name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input type="textarea" v-model="roleForm.desc"></el-input>
      </el-form-item>
      <!-- <el-form-item label="前端路由:"> -->
        <!-- <h5 style="color:#ccc;">（ 请为当前添加角色设置权限模块 ）</h5> -->
        <!-- <el-tree
          :data="routes"
          show-checkbox
          node-key="id"
        ></el-tree> -->
        <!-- <div class="select-routes">
          <div class="routes-item" v-for="(v,k) in routes" :key="v.id">
            <div class="routes-item-header">{{v.title}}</div>
            <el-checkbox :label="v.title"></el-checkbox>
            <el-checkbox :label="item.title" v-for="(item ,key) in v.children" :key="item.id"></el-checkbox>
          </div>
        </div>-->
      <!-- </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="addRoleEvent">立即添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleForm: {},
      routes: []
    };
  },
  created() {
    // this.$http.getRouteList().then(res => {
    //   if (res && res.data.code == 200) {
    //     let tmp = JSON.stringify(res.data.data);
    //         tmp = tmp.replace(/title/g,'label');  
    //     this.routes = JSON.parse(tmp);
    //   }
    // });
  },
  methods: {
    addRoleEvent() {
      //添加
    }
  }
};
</script>

<style lang="less">
.role-add {
  width: 70%;
  margin: 20px auto;

  .select-routes {
    .routes-item {
      .routes-item-header {
        font-weight: bold;
        color: #999;
        border-bottom: 1px solid #eee;
      }
    }
  }
}
</style>